# CSS变量：原生样式复用方案
CSS变量（也称为CSS自定义属性）是现代CSS中强大的样式复用工具，它让我们能够像编程语言那样定义和复用样式值，极大地提升了CSS的可维护性和灵活性。
## 一、什么是CSS变量？
CSS变量是CSS中可重复使用的值，通过自定义属性语法定义（`--*`前缀），并使用`var()`函数引用。与传统CSS预处理器（如Sass、Less）的变量不同，CSS变量是浏览器原生支持的，具有动态特性。
```css
:root {
--primary-color: #4285f4;
--spacing-unit: 8px;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}
```
## 二、CSS变量的核心优势
1. **动态更新**：通过JavaScript实时修改变量值
2. **层级继承**：遵循CSS层叠规则，可局部覆盖
3. **浏览器原生**：无需预编译，直接运行
4. **响应式设计**：与媒体查询完美配合
## 三、CSS变量的实际应用场景
### 1. 主题切换实现
```css
:root {
--bg-color: #fff;
--text-color: #333;
}
[data-theme="dark"] {
--bg-color: #222;
--text-color: #eee;
}
body {
background: var(--bg-color);
color: var(--text-color);
transition: background 0.3s, color 0.3s;
}
```
### 2. 动态间距系统
```css
:root {
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
}
.card {
padding: var(--space-md);
margin-bottom: var(--space-lg);
}
```
### 3. 复杂计算简化
```css
:root {
--base-size: 16px;
}
h1 {
font-size: calc(var(--base-size) * 2);
}
.container {
width: calc(100vw - var(--base-size) * 4);
}
```
## 四、JavaScript交互控制
CSS变量最大的优势是可以与JavaScript动态交互：
```javascript
// 设置变量值
document.documentElement.style.setProperty('--primary-color', '#ff0000');
// 读取变量值
const primaryColor = getComputedStyle(document.documentElement)
.getPropertyValue('--primary-color');
```
## 五、CSS变量最佳实践
1. **命名规范**：使用语义化命名（如`--color-primary`而非`--red`）
2. **定义位置**：在`:root`中定义全局变量，在特定组件中定义局部变量
3. **备用值**：使用`var(--my-var, default-value)`语法提供回退方案
4. **单位处理**：将单位包含在变量值中（`--spacing: 8px`而非`--spacing: 8`）
## 六、浏览器兼容性考虑
CSS变量在现代浏览器中得到了广泛支持（IE除外）。对于需要支持旧版浏览器的项目：
```css
.button {
background: #4285f4; /* 备用值 */
background: var(--primary-color, #4285f4);
}
```
## 结语
CSS变量为前端开发带来了全新的样式管理方式，从简单的颜色定义到复杂的主题系统，再到与JavaScript的动态交互，它已经成为现代CSS不可或缺的一部分。掌握CSS变量将显著提升你的样式开发效率和可维护性。
**小技巧**：在开发工具中查看CSS变量时，Firefox开发者工具会显示变量的定义位置，非常实用！
